<template>
  <div class="home">
    <div class="search">
      <div class="bell">
        <router-link to="my">
          <van-icon name="manager" />
        </router-link>
      </div>
      <div class="ipt">
        <form @submit.prevent onsubmit="" action="#">
          <van-search
            placeholder="搜索帖子/啪啪/用户"
            v-model="k"
            @search="onSearch"
          />
          <!-- <input style="display:none;" type="submit" /> -->
        </form>
      </div>
      <div class="add">
        <router-link to="pb">
          <van-icon name="photograph" class="btn" />
        </router-link>
      </div>
    </div>
    <div class="m-menu">
      <van-tabs class="tabs" swipeable animated ref="mmenu">
        <van-tab :title="c.name" v-for="c in cates" :key="c.val" :name="c.val">
          <van-notice-bar
            mode="closeable"
            v-if="!noticeClose && notice"
            @close="closeNotice"
            background="#f7f7f8"
            color="#97969c"
          >
            {{ "公告：" + notice }}
          </van-notice-bar>
          <tpl :type="c.val" v-on:showNotice="showNotice" />
        </van-tab>
      </van-tabs>
    </div>
    <nt :notice.sync="notice" ref="nt" />
  </div>
</template>

<script>
import nt from "../components/Notice";
import tpl from "../components/TopicList";
export default {
  name: "main-home",
  components: { nt, tpl },
  data() {
    return {
      cates: [
        { name: "推荐", val: 1 },
        { name: "关注", val: 2 },
        { name: "文字", val: 3 },
        { name: "图片", val: 4 },
        { name: "视频", val: 5 }
      ],
      k: "",
      paddingTop: 0,
      notice: null,
      noticeClose: false
    };
  },
  methods: {
    noticeShowNow() {
      return !this.noticeClose;
    },
    closeNotice() {
      this.noticeClose = true;
      window.sessionStorage.setItem("noticeClose", true);
    },
    showNotice(notice) {
      let noticeClose = window.sessionStorage.getItem("noticeClose");
      if (noticeClose) return;
      this.notice = notice;
    },
    onSearch() {
      this.$router.push({
        name: "search",
        query: {
          k: this.k
        }
      });
      this.k = "";
    },
    closeNotice() {
      this.notice = null;
      this.noticeClose = true;
      window.sessionStorage.setItem("noticeClose", true);
    }
  },
  created() {
    this.noticeClose = window.sessionStorage.getItem("noticeClose");
    this.paddingTop = window.sessionStorage.getItem("paddingTop");
    if (!this.paddingTop) this.paddingTop = 0;
    else this.paddingTop = parseInt(this.paddingTop);
  }
};
</script>

<style lang="less">
.home {
  background: #fff;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  position: fixed;
  a {
    color: #e8575d;
  }
  .m-menu {
    .tabs {
      display: inline-block;
      width: 375px;
      .van-tab {
        flex-basis: 20% !important;
      }
      .van-tabs__wrap {
        border-width: 0 !important;
      }
      .van-tabs__wrap::after {
        border-width: 0 !important;
      }
      .van-tab--active {
        color: #e8575d !important;
        font-weight: bold;
        font-size: 18px;
        transition: 50ms;
      }
      .van-ellipsis {
        overflow: visible !important;
      }
      .van-tabs__line {
        background-color: #e8575d;
      }
    }
    .btn {
      display: inline-block;
      color: #555;
      padding: 7px 0;
      margin-left: 10px;
      font-size: 22px;
      text-align: center;
      vertical-align: top;
    }
  }
  .search {
    padding: 0;
    display: flex;
    text-align: center;
    line-height: 36px;
    font-size: 26px;
    padding-top: 5px;
    background: #fff;
    .van-search {
      padding: 0;
    }
    .bell {
      width: 40px;
      color: #e8575d;
    }
    .ipt {
      width: 300px;
    }
    .add {
      width: 40px;
    }
  }
}
.m-notice {
  text-align: center;
  position: relative;
  background: #f7f7f8;
  color: #97969c;
  font-size: 18px;
  padding: 5px 10px;

  .txt {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .close {
    position: absolute;
    right: 10px;
    top: 9px;
  }
}
.head-height {
  height: 90px;
}
</style>
